<template>
    <div class="header_warp">
        <div class="tag_warp">
            <el-tabs style="width:100%;" :value="curTabId" type="card" @tab-click="chooseMenu" @tab-remove="removeMenu">
                <el-tab-pane v-for="(item, index) in curListTab" :closable="item.closeable" :key="item.id"
                    :label="item.name" :name="item.id">
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="myname">
            <div style="margin-right:20px;">
                开启订单语音：<el-switch v-model="openaudio" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
            <el-dropdown trigger="click" @command="doCmd">
                <span class="el-dropdown-link" style="cursor: pointer">
                    {{ loginUser.nickName }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-edit-outline" command="updatePass">修改密码</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-refresh-right" command="quit">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <CDailog title="修改密码" :isShow="isShowPass" @close="isShowPass = false" @enter="doUpPass">
            <el-form :inline="true">
                <CText  form v-model="mm.oldpass" :size="7" title="旧密码" field="oldpass" showPassword></CText>
                <CText  form v-model="mm.newpass" title="新密码" field="newpass" showPassword></CText>
                <CText  form v-model="mm.renewpass" title="确认新密码" field="renewpass" showPassword></CText>
            </el-form>
        </CDailog>
        
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapGetters } = createNamespacedHelpers("menu");
export default {
    data() {
        return {
            isShowPass: false,
            curPage: "",
            tags: [],
            openaudio: false,
            loginUser: this.$session.getLoginUser(),
            mm: {
                oldpass: "",
                newpass: "",
                renewpass: "",
            }
        }
    },
    computed: {
        ...mapGetters(["curListTab", "curTabId"]),
    },
    watch: {
        curTabId(nv, ov) {
            this.curPage = nv;
        },
        openaudio(nv, ov) {
            if (nv) {
                this.$emit("openAudio");
            }
        }
    },
    methods: {
        doCmd(cmd) {
            console.log(cmd, 222)
            if (cmd == "quit") {

                this.$session.logout();
                this.$router.push("/login");
            } else if (cmd == "updatePass") {
                this.isShowPass = true;
            }
        },
        doUpPass() {
            this.$ums.douppass(this.mm).then(res => {
                if (res.code == 200) {
                    this.$message.success("密码修改成功");
                } else {
                    this.$message.error(res.msg);
                    this.isShowPass = false;
                }
            })
        },
        chooseMenu(item) {
            this.$store.commit("menu/SET_CUR_TAB", item.name);
        },
        removeMenu(item) {
            this.$store.commit("menu/REMOVE_TAB", item);
        }
    }
}
</script>

<style lang="scss" scoped>
.header_warp {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;

    .myname {
        width: 250px;
        margin-left: 20px;
        display: flex;
        font-size:12px;
    }

    .tag_warp {
        width: 80%;
        display: flex;
        overflow: hidden;
        margin-top: 38px;
    }
}

::v-deep .el-tabs__header {
    border-bottom: 0px !important;
}

::v-deep .el-tabs__nav {
    height: 40px;
}

::v-deep .el-tabs__item {
    height: 40px;
    line-height: 40px;
}
</style>
